<template>
  <div class="playlist">
    <button :class="LastSong_move" @mousedown="last"></button>
    <!-- -->
    <button @click="play" :class="playlogo"></button>
    <button :class="NextSong" @mousedown="Next"></button>
    <!-- -->
  </div>
</template>

<script>
export default {
  name: "ClickPlay",
  data() {
    return {
      playlogo: "playlogo",
      LastSong_move: "LastSong",
      NextSong: "NextSong",
    };
  },
  methods: {
    play() {
      this.$bus.$emit(
        "PlayAndSuspend",
        this.playlogo == "playlogo" ? true : false
      );
      if (this.playlogo == "playlogo") {
        this.playlogo = "pauselogo";
      } else {
        this.playlogo = "playlogo";
      }
    },
    Next(){
      this.$bus.$emit('NextSong','loop')
    },
    last(){
       this.$bus.$emit('lastSong','last') 
    }

  },
  mounted() {
    this.$bus.$on("PlayState", (el) => {
      this.playlogo = el;
    });
  },
};
</script>

<style scoped>
.playlogo {
  position: absolute;
  top: 12px;
  left: 36px;
  width: 36px;
  height: 36px;

  background: url(../images/playbar.png) no-repeat 0 -204px;
  border: none;
}
.playlogo:hover {
  background: url(../images/playbar.png) no-repeat -40px -204px;
}

.pauselogo {
  position: absolute;
  top: 12px;
  left: 36px;
  width: 36px;
  height: 36px;
  background: url(../images/playbar.png) no-repeat 0 -165px;
  border: none;
}
.pauselogo:hover {
  background: url(../images/playbar.png) no-repeat -40px -165px;
}

.playlist {
  position: relative;
  padding: 12px 0 0;
  width: 137px;
  height: 42px;
  float: left;
}

.LastSong {
  position: absolute;
  top: 17px;
  left: 0;
  padding: 0;
  width: 28px;
  height: 28px;
  background: url(../images/playbar.png) no-repeat 0 -130px;

  border: none;
}
.LastSong:hover {
  background: url(../images/playbar.png) no-repeat -30px -130px;
}

.NextSong {
  position: absolute;
  top: 17px;
  left: 80px;
  padding: 0;
  width: 28px;
  height: 28px;
  background: url(../images/playbar.png) no-repeat -80px -130px;
  border: none;
}
.NextSong:hover {
  background: url(../images/playbar.png) no-repeat -110px -130px;
}
</style>